<template>
  <view class="confirm-container">
    <!-- 预约信息 -->
    <view class="info-card">
      <view class="hospital-info">
        <image :src="appointmentInfo.hospitalLogo" mode="aspectFit" class="logo" />
        <view class="info">
          <text class="name">{{ appointmentInfo.hospitalName }}</text>
          <text class="department">{{ appointmentInfo.departmentName }}</text>
        </view>
      </view>
      
      <view class="doctor-info">
        <image :src="appointmentInfo.doctorAvatar" mode="aspectFill" class="avatar" />
        <view class="info">
          <text class="name">{{ appointmentInfo.doctorName }}</text>
          <text class="title">{{ appointmentInfo.doctorTitle }}</text>
        </view>
        <view class="fee">
          <text class="label">挂号费</text>
          <text class="amount">¥{{ appointmentInfo.fee }}</text>
        </view>
      </view>
      
      <view class="schedule-info">
        <text class="date">{{ appointmentInfo.date }}</text>
        <text class="time">{{ appointmentInfo.time }}</text>
      </view>
    </view>
    
    <!-- 就诊人信息 -->
    <view class="patient-card">
      <view class="card-title">就诊人信息</view>
      <view class="patient-info">
        <view class="info">
          <text class="name">{{ patientInfo.name }}</text>
          <text class="details">{{ patientInfo.gender }} {{ patientInfo.age }}岁</text>
        </view>
        <view class="card-no">
          <text class="label">就诊卡号：</text>
          <text class="value">{{ patientInfo.cardNo }}</text>
        </view>
      </view>
    </view>
    
    <!-- 注意事项 -->
    <view class="notice-card">
      <view class="card-title">注意事项</view>
      <view class="notice-list">
        <view class="notice-item" v-for="(notice, index) in notices" :key="index">
          <text class="dot"></text>
          <text class="content">{{ notice }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部确认栏 -->
    <view class="bottom-bar">
      <view class="fee-info">
        <text>实付金额</text>
        <text class="amount">¥{{ appointmentInfo.fee }}</text>
      </view>
      <button class="submit-btn primary-btn" @tap="confirmAppointment">
        确认预约
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 预约信息
const appointmentInfo = ref({
  hospitalName: '澳门镜湖医院',
  hospitalLogo: '/static/hospital/kiang-wu.jpg',
  departmentName: '心内科',
  doctorName: '张医生',
  doctorTitle: '主任医师',
  doctorAvatar: '/static/doctor/doctor1.png',
  fee: 60,
  date: '2024-03-25',
  time: '09:30-10:00'
})

// 就诊人信息
const patientInfo = ref({
  name: '张三',
  gender: '男',
  age: 45,
  cardNo: '1234567890'
})

// 注意事项
const notices = [
  '请您按时就诊，提前15分钟到达医院',
  '请携带就诊卡和有效身份证件',
  '如需取消预约，请提前24小时操作',
  '就诊当天请遵医嘱，保持空腹'
]

// 确认预约
const confirmAppointment = () => {
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showModal({
      title: '预约成功',
      content: '您的预约已成功提交',
      showCancel: false,
      success: () => {
        // 跳转到预约记录页面
        uni.redirectTo({
          url: '/pages/appointment/record'
        })
      }
    })
  }, 1500)
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const { patientId, departmentId, hospitalId, doctorId, scheduleId } = page.$page?.options || {}
  
  // 加载预约信息
  loadAppointmentInfo(patientId, departmentId, hospitalId, doctorId, scheduleId)
})

const loadAppointmentInfo = (...args) => {
  // 这里应该调用API获取数据
  console.log('加载预约信息:', args)
}
</script>

<style lang="scss">
.confirm-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  padding-bottom: 140rpx;
  
  .info-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: $shadow-sm;
    
    .hospital-info {
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #eee;
      
      .logo {
        width: 80rpx;
        height: 80rpx;
        border-radius: $radius-md;
        margin-right: 20rpx;
      }
      
      .info {
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .department {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
    }
    
    .doctor-info {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;
      
      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .title {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
      
      .fee {
        text-align: right;
        
        .label {
          font-size: 26rpx;
          color: $text-regular;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .amount {
          font-size: 32rpx;
          color: $danger;
          font-weight: bold;
        }
      }
    }
    
    .schedule-info {
      padding-top: 20rpx;
      text-align: center;
      
      .date {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .time {
        font-size: 28rpx;
        color: $primary-color;
      }
    }
  }
  
  .patient-card,
  .notice-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: $shadow-sm;
    
    .card-title {
      font-size: 30rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
  }
  
  .patient-card {
    .patient-info {
      .info {
        margin-bottom: 12rpx;
        
        .name {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
          margin-right: 16rpx;
        }
        
        .details {
          font-size: 26rpx;
          color: $text-regular;
        }
      }
      
      .card-no {
        .label {
          font-size: 26rpx;
          color: $text-regular;
        }
        
        .value {
          font-size: 26rpx;
          color: $primary-color;
        }
      }
    }
  }
  
  .notice-card {
    .notice-list {
      .notice-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 12rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .dot {
          width: 12rpx;
          height: 12rpx;
          background: $primary-color;
          border-radius: 50%;
          margin-top: 12rpx;
          margin-right: 12rpx;
          flex-shrink: 0;
        }
        
        .content {
          flex: 1;
          font-size: 26rpx;
          color: $text-regular;
          line-height: 1.6;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .fee-info {
      text {
        font-size: 26rpx;
        color: $text-regular;
        margin-right: 8rpx;
      }
      
      .amount {
        font-size: 36rpx;
        color: $danger;
        font-weight: bold;
      }
    }
    
    .submit-btn {
      width: 240rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 